<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>左右可移动分割栏</title>
</head>

<body>
    <div class="left">
        <div class="content">
            <img src="https://gitee.com/static/images/logo-black.svg?t=158106664" alt="">
        </div>
        <div class="separator">
            <i></i>
            <i></i>
        </div>
    </div>
    <div class="main">
        <div class="content">
            右边内容(main)
        </div>
    </div>
</body>
<script>
    var startX, startWidth
    startWidth = localStorage.getItem('scalable_width') || getScalableDivWidth()

    document.querySelector('.left').style.width = startWidth + 'px'

    document.querySelector('.separator').addEventListener('mousedown', startDrag)

    function startDrag(e) {
        startX = e.clientX
        startWidth = getScalableDivWidth()

        document.documentElement.addEventListener('mousemove', onDrag)
        document.documentElement.addEventListener('mouseup', stopDrag)
    }

    function onDrag(e) {
        let newWidth = startWidth + e.clientX - startX
        document.querySelector('.left').style.width = newWidth + 'px'
    }

    function stopDrag(e) {
        localStorage.setItem('scalable_width', getScalableDivWidth())
        document.documentElement.removeEventListener('mousemove', onDrag)
        document.documentElement.removeEventListener('mouseup', stopDrag)
    }

    function getScalableDivWidth() {
        return parseInt(window.getComputedStyle(document.querySelector('.left')).width, 10)
    }
</script>

</html>